import React from "react";
import { Modal, Form, Radio, Row, Col, Input, InputNumber, Space, Button } from "antd";
import { modalPropsType } from "@/constants/types";
import XlRadio from "@/components/Form/XlRadio";
import { MinusOutlined, PlusOutlined } from "@ant-design/icons";

const {Item} = Form;
const labelCol = {span: 7}

const MtExport = ({visible, title, currentRow, onCancel, onSubmit, loading}: modalPropsType) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      orderId: currentRow?.id,
      mode: res?.mode,
      customizations: res?.type === '2' ? res?.customizations : undefined
    });
  }

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      maskClosable={false}
      width="760px"
      confirmLoading={loading}
    >
      <Form className="modal-form-padding" form={form} initialValues={{type: '1'}} labelCol={labelCol}>
        <Item name="type" rules={[{required: true, message: '此项必填'}]}>
          <Radio.Group onChange={(e) => form.setFieldValue('customizations', e.target.value === '2' ? [{text: '', boxStart: undefined, boxEnd: undefined}] : undefined)} options={[{label: '默认唛头', value: '1'}, {label: '自定义唛头', value: '2'}]} />
        </Item>
        <Item label="唛头样式" name="mode" rules={[{required: true, message: '请选择唛头样式'}]} labelCol={{span: 3}}>
          <XlRadio.ButtonRadioGutterGroup options={[{label: '热敏纸单张 (10x10CM)', value: '1'}, {label: 'A4纸质 6张(10x10CM)', value: '2'}]} />
        </Item>
        <Item noStyle shouldUpdate={(prev, next) => prev.type !== next.type}>
          {({getFieldValue}) => {
            const type = getFieldValue('type');
            if (type === '2') {
              return (
                <Form.List name="customizations" initialValue={[{text: '', boxStart: undefined, boxEnd: undefined}]}>
                  {(fields, {add, remove}) =>
                    fields.map((field, fieldIndex) => (
                      <Row gutter={20} key={field.name}>
                        <Col span={10}>
                          <Item label="内容" name={[field.name, 'text']}>
                            <Input />
                          </Item>
                        </Col>
                        <Col span={10}>
                          <Item label="箱号" required>
                            <Space>
                              <Item noStyle name={[field.name, 'boxStart']} rules={[{required: true, message: '请输入开始箱号'}]}>
                                <InputNumber min={0} />
                              </Item>
                              <span>至</span>
                              <Item noStyle name={[field.name, 'boxEnd']} rules={[{required: true, message: '请输入结束箱号'}]}>
                                <InputNumber min={0} max={currentRow?.totalPieces || 0} />
                              </Item>
                            </Space>
                          </Item>
                        </Col>
                        <Col>
                          <Space>
                            <Button type="primary" onClick={() => add({text: '', boxStart: undefined, boxEnd: undefined})}>
                              <PlusOutlined/>
                            </Button>
                            {fieldIndex > 0 && (
                              <Button type="primary" onClick={() => remove(field.name)}>
                                <MinusOutlined/>
                              </Button>
                            )}
                          </Space>
                        </Col>
                      </Row>
                    ))
                  }
                </Form.List>
              );
            }    
          }}
        </Item>
      </Form>
    </Modal>
  );
}
export default MtExport;